import React from 'react';
import { connect } from 'dva';
import { getSessionData, addSessionData, getData } from '../../../utils/localData'
import { sub,add } from '../../../utils/MyMath'
import styles from './mine_details.less';
import styles1 from './mine_details.css';
import { Button, NavBar, Icon, Accordion } from 'antd-mobile';
import Loading from '../../loading/loading'
import moment from 'moment'

@connect(({orders}) => ({
  orders
}))
export default class Mine_details extends React.Component {
  constructor() {
    super()
    this.state = {
      time:'',
      selAll:false
    }
  }
  isFirst = true
  timer = false
  renderContent(order,timeText){
    switch (order.orderStatus) {
      case -1://'取消订单'
        return (
          <div className={styles.mine_delping6}>
            <div className={styles.mine_delptxt1}>订单已取消</div>
            <div className={styles.mine_delptxt2}>感谢使用马管家服务</div>
            <div className={styles.mine_delptxt2}></div>
          </div>
        )
        break;
      case 1://'等待付款'
        return(
          <div className={styles.mine_delping}>
            <div className={styles.mine_delptxt1}>待支付</div>
            <div className={styles.mine_delptxt2}>请在<span className={styles.mine_delpsps}>{timeText}</span>内支付，超时订单将自动取消</div>
            <div className={styles.mine_delptxt2}>需支付 <span className={styles.mine_color}>￥{order.actualAmountMoney}</span></div>
            <Button className={styles.mine_delpbut1} onClick={
              ()=>{
                const { dispatch } = this.props
                let user = JSON.parse(getData("userInfo"))
                console.log(order.orderId)
                dispatch({
                  type: 'orders/cancelSelOrderById',
                  payload: {
                    selQs:{
                      orderId:order.orderId
                    },
                    cancelQs:{
                      orderId:order.orderId,
                      orderNum:order.orderNum,
                      userId:user.userId
                    }
                  }
                })
              }
            }>取消订单</Button>
            <Button onClick={()=>{
                window.YLJsBridge.call(
                  'pay',
                  {orderId:order.orderNum},
                  (data)=>{
                    addSessionData("myOrderId",order.payOrderId)
                    this.selOrderById()
                  }
                )
              }} className={styles.mine_delpbut2}>立即支付</Button>
          </div>
        )
        break;
      case 2://'等待商家确认'
        return (
          <div className={styles.mine_delping6}>
            <div className={styles.mine_delptxt1}>等待商家确认</div>
            <div className={styles.mine_delptxt2}>商家正在确认您的订单</div>
            <div className={styles.mine_delptxt3}>请您耐心等待呦！</div>
          </div>
        )
        break;
      case 4://'待取衣'
        return (
          <div className={styles.mine_delping6}>
            <div className={styles.mine_delptxt1}>待取衣</div>
            <div className={styles.mine_delptxt2}>小马哥已火速前往您的位置</div>
            <div className={styles.mine_delptxt3}>请您耐心等待呦！</div>
          </div>
        )
        break;
      case 5://'待洗衣'
        return (
          <div className={styles.mine_delping6}>
            <div className={styles.mine_delptxt1}>待洗衣</div>
            <div className={styles.mine_delptxt2}>您的衣服即将开始清洗</div>
            <div className={styles.mine_delptxt3}>请您耐心等待呦！</div>
          </div>
        )
        break;
      case 6://'待送达'
        return (
          <div className={styles.mine_delping6}>
            <div className={styles.mine_delptxt1}>待送达</div>
            <div className={styles.mine_delptxt2}>小马哥已火速前往您的位置</div>
            <div className={styles.mine_delptxt3}>请您耐心等待呦！</div>
          </div>
        )
        break;
      case 7://'完成'
        return(
          <div className={styles.mine_delping}>
            <div className={styles.mine_delptxt1}>已完成</div>
            <div className={styles.mine_delptxt2}>感谢使用马管家洗衣服务</div>
            {order.commentStatus===0?
            <Button onClick={()=>{
                this.props.history.push({
                  pathname:"/Mine_evaluation",
                  orderId:order.orderId
                })
              }} className={styles.mine_delpbut}>去评价</Button>
            :null
            }
          </div>
        )
        break;
      default:
        break;
    }
  }

  render() {
    document.title = '订单详情'
    let {order} = this.props.orders
    if(!order){
      alert("未找到指定的订单")
      return (
        <div className={styles.mine_delpitall}>
          <Loading/>
        </div>
      )
    }
    let {commodityList} = this.props.orders
    let end = order.paymentExpireTime
    let now = new Date().getTime();
    let ss = end - now; //目标时间和现在的时间差
    let timeText
    if(ss > 0){
      let minutes = Math.floor(ss/1000/60%60);
      let seconds = Math.floor(ss/1000%60);
      if(minutes<10)minutes = "0"+minutes;
      if(seconds<10)seconds = "0"+seconds;
      timeText = minutes+"分"+seconds+"秒";
    }else{
        timeText = ''
    }
    let list = []
    commodityList.forEach((item,i)=> {
      if(!this.state.selAll && i>1){
        return
      }
      list.push(
        <div key={i} className={styles.mine_delfen}>
          <div className={styles.mine_delyi}>
            <img src={item.imgUrl} alt="" className={styles.del_img2} />
            <div>
                <div>{item.commodityName}</div>
                <div className={styles.mine_txt2}> <span className={styles.mine_mone}>￥</span>{item.commodityPrice}</div>
            </div>
        </div>
            <div className={styles.mine_xright}>x{item.buyNum}</div>
        </div>
      )
    });
    let scount = 0
    commodityList.forEach(item => {
      scount = add(scount, item.buyNum)
    });
    console.log("计数==="+scount)
    return (
      <div className={styles.mine_delpitall}>

         <div className={styles1.mine_delall}>
          {this.renderContent(order,timeText)}

         <div className={styles.mine_deltopi}>
           <img src="./img/addr.png" alt="" className={styles.mine_del} />
           <div className={styles.mine_deltop}>

             <div className={styles.mine_name}>
               <span className={styles.mine_span}>{order.purchaserName}</span>
               <span className={styles.mine_span}>{order.purchaserSex}</span>
               <span className={styles.mine_span}>{order.purchaserPhone}</span>
             </div>
             <div className={styles.mine_addr}>{order.purchaserAddress}</div>
           </div>
         </div>

       <div className={styles.mine_delfenall}>
           {list}
           {commodityList.length>2?
           <div className={styles.mana_lef3} onClick={()=>{
                this.setState({selAll:!this.state.selAll})
             }}>
              <div className={styles.mana_up}>展开剩余内容</div>
              <img src="./img/open.png" alt="" className={this.state.selAll?styles.mine_close:styles.mine_open} />
              {/*<Icon type={this.state.selAll?"up":"down"} size={'xs'}/>*/}
           </div>
           :
           null
           }
       </div>

            <div className={styles.mine_delcen}>
              <div className={styles.mine_delcone}>
                   <div>商品金额</div>
                   <div>￥{sub(order.actualAmountMoney?order.actualAmountMoney:0,order.deliveryFee?order.deliveryFee:0)}</div>
              </div>
              <div className={styles.mine_delcone}>
                   <div>配送费</div>
                   <div>￥{order.deliveryFee}</div>
              </div>
              <div className={styles.mine_delctwo}>
                实付<span className={styles.mine_delcred}>￥{order.actualAmountMoney}</span>
              </div>
           </div>

           <div className={styles.mine_delbot}>
             <div className={styles.mine_delboteve}>订单编号：{order.orderNum}</div>
             <div className={styles.mine_delboteve}>下单时间：{moment(order.createTime).format("YYYY-MM-DD HH:mm:ss")}</div>
             <div className={styles.mine_delboteve}>支付方式：在线支付</div>
             <div className={styles.mine_delboteve}>备注信息：{order.orderRemark}</div>
           </div>
         </div>
     </div>


    )
  }
  componentDidUpdate(){
    if(this.isFirst){
      this.isFirst = false
      let {order} = this.props.orders
      if(order && order.orderStatus === 1){
          let end = order.paymentExpireTime
          let now = new Date().getTime();
          let ss = end - now; //目标时间和现在的时间差
          if(ss > 0){
              this.state.time = order.paymentExpireTime
              this.timeCount()
          }else{
              if(this.timer){
                  clearInterval(this.timer)
              }
          }
      }
    }
  }

  componentDidMount(){
    let ss =  this.GetRequest()
    this.selOrderById(ss.id)
  }

  GetRequest() { 
    let url = this.props.location.search; //获取url中"?"符后的字串 
    let theRequest = {}; 
    if (url.indexOf("?") !== -1) { 
    let str = url.substr(1); 
    let strs = str.split("&"); 
      for(let i = 0; i < strs.length; i ++) { 
        theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
      } 
    } 
    return theRequest; 
  } 

  selOrderById(id){
    console.log("url中获取的订单id："+id)
    let myOrderId
    const { dispatch } = this.props
    if(id){
      myOrderId = id
    }else{
      myOrderId = getSessionData("myOrderId")
    }
    dispatch({
      type: 'orders/selOrderById',
      payload: {orderId:myOrderId}
    })
  }

  componentWillUnmount(){
    if(this.timer){
      clearInterval(this.timer)
    }
  }
  timeCount(){
      this.timer = setInterval(()=>{
          this.setState({time:this.state.time})
      },1000)
  }
}
